<template>
  <div>
    <div>
      <div class="flx-c gateway-node">
        <div v-if="type===3">会签</div>
        <div v-if="type===4">或签</div>
        <div v-if="type===5">条件</div>
      </div>
      <Vline :scope="[1,2,7]" showBtn @addNode="addChild"></Vline>
      <div v-if="children.length===1">
        <SimpleNode
          @:hasCondition="type===5"
          :type="children[0].type"
          :showBtn="true"
          @removeNode="removeParentNode(children[0])"
          @toSetNode="toSetNode"
          @addNode="onAddNode"></SimpleNode>
      </div>
      <div v-else>
        <div class="flx-b" :style="{width:`${children.length*180}px`}" style="position:relative;border-top:solid 1px #226c9a;border-bottom:solid 1px #226c9a;margin:0 auto;">
          <div style="width:70px;height:1px;background:#fff;position:absolute;top:-1px;left:0"></div>
          <div style="width:70px;height:1px;background:#fff;position:absolute;bottom:-1px;left:0"></div>
          <div style="width:70px;height:1px;background:#fff;position:absolute;top:-1px;right:0px"></div>
          <div style="width:70px;height:1px;background:#fff;position:absolute;bottom:-1px;right:0px"></div>
          <div style="text-align:center;" v-for="(node,i) in children" :key="`child${i}`">
            <Vline></Vline>
            <SimpleNode
              :type="node.type"
              :showBtn="false"
              @toSetNode="toSetNode"
              @removeNode="onRemoveNode(i)"></SimpleNode>
          </div>
        </div>
        <Vline showBtn @addNode="onAddNode"></Vline>
      </div>
    </div>
  </div>
</template>

<script>
import SimpleNode from './SimpleNode'
import Vline from './Vline'
export default {
  components: {
    SimpleNode, Vline
  },
  props: {
    type: {
      type: Number,
      default: 3
    }
  },
  data () {
    return {
      children: [
        { type: 1 }, { type: 1 }
      ]
    }
  },
  mounted () {
  },
  methods: {
    addChild (tmp) {
      this.children.push({ type: tmp.key })
    },
    onRemoveNode (i) {
      const that = this
      that.$confirm({ title: '确定删除这个节点么',
        onOk () {
          that.children.splice(i, 1)
        }
      })
    },
    removeParentNode (node) {
      this.$emit('removeNode', Object.assign({}, node))
    },
    onAddNode (type) {
      this.$emit('addNode', type)
    },
    toSetNode (param) {
      this.$emit('toSetNode', param)
    }
  }
}
</script>
<style lang="less" scoped>
.gateway-node{
  font-size:10px;
  width:40px;
  height:40px;
  border-radius:50%;
  background:#7abce6;
  color:#fff;
  margin:0 auto;
  box-shadow: 0 2px 10px #999;
  &:hover{
    cursor:pointer;
    background:#226c9a;
    box-shadow: 0 2px 30px #106fb7;
  }
}
</style>
